<template>
    <section class="home-container">
        <div class="tab-container">
            <el-tabs type="border-card"  @tab-click="handleClick">
                <el-tab-pane label="预备成员" name="first">
                  <el-table
                      :data="tableData"
                      style="width: 100%">
                      <el-table-column v-for="(item,index) in todo" :key="index"
                        :label="item.lable"
                        :width ="item.width"
                        :prop="item.prop"
                        >
                      </el-table-column>
                      <el-table-column
                        fixed="right"
                        label="操作"
                        width="150"
                        prop="date">
                        <template slot-scope="scope">
                          <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small" fixed="left">删除</el-button>
                          <el-button type="text" size="small"  @click="drawer = true"  style="margin-left: 16px;">查看练习情况</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="练习库" name="second">
                  <el-table
                      header-align=“center”
                      :data="tableData"
                      style="width: 100%">
                      <el-table-column v-for="(item,index) in todoList" :key="index"
                        :label="item.lable"
                        :width ="item.width"
                        :prop="item.prop"
                        >
                      </el-table-column>
                      <el-table-column
                        fixed="right"
                        label="操作"
                        width="185"
                        prop="date"
                        >
                        <template >
                          <el-button type="text" fixed="left">发送</el-button>
                          <el-button type="text" size="small"  @click="situation"  style="margin-left: 16px;" >编辑</el-button>
                          <el-button type="text" @click="tableBtn">完成情况</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
            <el-button type="text"  @click="open" v-model="Text" class="btn">{{Text}}</el-button>
        </div>
         <edit/>
    </section>
   
</template>

<script>
import edit from './edit.vue'
export default {
    data () {
      var checkphone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (!this.isCellPhone(value)) {
        // 引入methods中封装的检查手机格式的方法
        callback(new Error("请输入正确的手机号!"));
      } else {
        callback();
      }
    }
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } 
        }, 1000); 
      };
      return {
        date1:'',
        date2:'',
        desc : "",
        Text : "新增成员",
        dialogVisible: false,
        dialogVisibleOne: false,
        dialog:false,
        table:false,
        editBtn: false,
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          ress: '上海市普陀区金沙江路 1518 弄',
          btn: 200333,
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333,
          ress: '上海市普陀区金沙江路 1518 弄',
          btn: 200333,
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333,
          ress: '上海市普陀区金沙江路 1518 弄',
          btn: 200333,
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333,
          ress: '上海市普陀区金沙江路 1518 弄',
          btn: 200333,
        },{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333,
          ress: '上海市普陀区金沙江路 1518 弄',
          btn: 200333,
        }],
        todo: [
          {lable : "姓名",width: "100", prop:"date"},
          {lable: "手机号", width: "100", prop:"date"},
          {lable : "提交次数", width: "100", prop:"date"},
          {lable : "未提交数", width: "100", prop:"date"},
          {lable : "平均分数", width: "100", prop:"date"},
          {lable : "近次提交时间", width: "150", prop:"date"},
          {lable : "录取状态", width: "100", prop:"date"},
          {lable : "意向", width: "100", prop:"date"}
        ],
        todoList:[
          {lable : "练习名称",width: "100", prop:"date"},
          {lable: "所属分类", width: "100", prop:"date"},
          {lable : "分制", width: "100", prop:"date"},
          {lable : "上传人", width: "100", prop:"date"},
          {lable : "更新时间", width: "100", prop:"date"},
          {lable : "发布状态", width: "150", prop:"date"},
          {lable : "提交人数", width: "100", prop:"date"},
          {lable : "应提交", width: "100", prop:"date"}
        ],
        ruleForm: {
          pass: '',
          checkPass: '',
          age: '',
          phone:'',
          resource: '',
          region: '',
          qq:''
        },
         rules: {
          age: [
            { validator: checkAge, trigger: 'blur' }
          ],
          region: [
            { required: true, message: '不能为空', trigger: 'change' }
          ],
          phone: [{ required: true, validator: checkphone, trigger: "blur" }],
        },
        drawer: false,
        dialogVisible:false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      };
    },
    methods: {
      handleClick(tab,event) {
        console.log(tab,event)
         if(tab.name == 'second'){
        	// 触发‘配置管理’事件
        	this.Text = '新增练习'
        }  if(tab.name == 'first') {
          this.Text = '新增成员'
        }
      },
      handleClicks(row) {
        console.log(row);
      },
      handleClose(done) {
        console.log(done)
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
       submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.ruleForm.region = ''
      },
      isCellPhone(val) {
      if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
        return false;
      } else {
        return true;
      }
    },
    deleteRow(index, rows) {
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '确定对当前账号进行删除吗？'),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
                rows.splice(index, 1);
                done();
            } else {
              done();
            }
          }
        }).catch(()=>{})
      },
    open() {
      if(this.Text == '新增成员') {
        this.dialogVisible = true
      }
      else if(this.Text == '新增练习') {
        this.dialogVisibleOne = true
      }
    },
    situation() {
      this.dialog = true
      console.log("1")
      console.log(this.dialog)
      this.$store.state.edit = true
      console.log(this.$store.state.edit)
    },
    tableBtn() {
      this.table = true
    },
    edit() {
      this.editBtn = true
    }
  },
  components: {
    edit
  },
}
</script>

<style lang="scss" scoped>
.home-container {
    font-size: .5rem;
    .tab-container {
        position: relative;
        .btn {
            position: absolute;
            right: 10px;
            top: 0;
        }
    }
} 
.el-icon-plus {
  font-size: 14px;
  color:blue
}
.formBtn {
  padding-left: 35%;
}
</style>